<?php
error_reporting(0);
define('IN_QY',true);
session_start();
require("include/common.inc.php");
define('SCRIPT','ad_list');
?>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>攻略</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 使用rem -->
    <link rel="stylesheet" href="assets/css/ydui.rem.css">
    <!-- 引入style.css -->
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- 使用rem，需另外引入ydui.flexible.js自适应类库 -->
    <script src="assets/js/ydui.flexible.js"></script>
    <!-- 引入Vue2.x -->
    <script src="assets/js/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="assets/js/ydui.js"></script>
	    <script src="assets/js/jquery.min.js"></script>
			<script type="text/javascript" src="/ui/layer/mobile/layer.js"></script> 
	
	
	<style>
	
ul,li,ol,dl{margin:0;padding:0;list-style:none;}
img,input{border:none;vertical-align:middle;}
a{text-decoration:none;color:inherit;outline:none;}
.clearfix{clear:both}
	.img-ys{
		width: 100%;
		height: 100%;
	}
	.inputtext{
		background: #CCCCCC;
		width: 100%;
		height: 100%;
	}
	.H-textbox.H-vertical-align-middle.H-vertical-middle.H-font-size-16.H-flex-item.H-box-sizing-border-box.H-border-none.H-outline-none.H-padding-12 {

    width: 100%;
    height: 100px;
    background-color: #F9F9F9;

}
h2 {
    display: block;
    font-size: 1.5em;
    -webkit-margin-before: 0.83em;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}



.remen li{border-bottom: 1px solid #e2e2e2;text-align: justify;font-size: 16px;line-height: 44px; padding: 0 15px;}
.lastli{background: #EEEEEE;}
/*选择地区*/
h4{padding: 0 10px;}
.express-area {  background-color: #fff; }
.express-area a { display: block; padding: 10px; font-size: 17px; background: url(../images/icon_xsj.png) no-repeat 94% 50%;background-size: 16px;}
.express-area dl { position: relative;  color: #4d525d;border-bottom: 1px solid #ddd; }
.express-area dl dt { position: absolute; top: 0; left: 0;line-height: 46px ;font-size: 17px;font-weight: normal; }
.express-area dl dd {  margin-left:100px; text-align: justify;  line-height: 46px}

/*选择地区弹层*/
.express-area-box { position: absolute; right: -100%; left: 50%; z-index: 120; width: 320px; margin-left: -160px; background-color: #fff; color: #4d525d; }
.express-area-box .top h3 {padding-left: 15px; font-size: 16px;background: #eeeeee;line-height: 44px;}
.lastli{text-align: center;font-size: 14px;background: #eeeeee;line-height: 40px;}
.express-area-box article { height: 100%; overflow-y: scroll; }
.area-list li {padding: 0 15px; border-bottom: 1px solid #e2e2e2; text-align: justify; line-height: 44px}
.express-area-box { position: fixed; left:  inherit; width: 170px;height: 100%;right: -100%;top: 0; margin-left: 0;box-shadow: 0 0 20px rgba(0,0,0,1); }

/*遮罩层*/
.mask { display: none; position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); }

.quereng{   
    background: #ffa200;
    border: 1px solid #ffa200;
    color: white;
    font-weight: 400;
    font-size: 16px;
    height: 38px;
}

.H-theme-background-color9 {
    background-color: #ffffff;
    height: 50px;
}

.H-header {
    min-height: 44px;
}
.aui-search-box1 {
    background: #f4f4f4;
    width: 65%;
    height: 25px;
    line-height: 22px;
    position: relative;
    margin: 5px auto;
    align-content: center;
    position: fixed;
    top: 6px;
    right: 60px;
	border-radius: 30px;
	text-align: center;
}
	</style>
</head>

<body>
    <yd-layout id="app" style="display:none;" v-show="appShow">
	
	    <div>
       <img class="img-ys" src="<?=$_GET['photo']?>" />
    </div>
    <div style="height:41px;">
       <h2>&nbsp;&nbsp;<?=$_GET['title']?></h2>
       </center>
    </div>

	
	
	
	
	
	
	
	
        <yd-navbar slot="navbar" title="攻略">
            <a href="javascript:history.go(-1);" slot="left">
                <yd-navbar-back-icon></yd-navbar-back-icon>
            </a>
            <a href="javascript:void(0);" slot="right" @click="handleSumbit">确定 </a>
            <!--<yd-button class="btn-define-1" slot="right" @click="handleSumbit">确定</yd-button>-->
        </yd-navbar>

        <div class="content margin-2">
            <form>
           <!--  千佛墙材质 -->

                    <!--  千佛墙材质 -->



                     <!--  架子材质 -->
                <yd-cell-group>
                   <template v-for="(item,index) in jiazicaizhilist">
                        <yd-cell-item style="position:relative;">
                            <span slot="left">攻略:&nbsp;   <span slot="left">{{item.name}}</span></span>
                            <button type="button" class="btn" slot="right"  @click="onShowSelectBox2(index)"><img src="assets/image/ico_jia.png" style="width:0.4rem;"></button>
                             <img src="assets/image/ico_delete.png" width="12" alt="" style="position:absolute;top:0px;left:5px;" slot="left" @click="deleteCaizhi2(index)"/>
                        </yd-cell-item>
                        <yd-cell-item v-if="item.src.length>0">
                        <div class="upload-list clearfix" slot="left" style="padding:0.16rem 0;">
                            <div v-for="(item,index) in item.src" class="item file-exist" style="width:1rem;height:1rem;">
                                <div class="file"><img :src="item.src" /></div>
                            </div>
                        </div>
                    </yd-cell-item>
                   </template>
                   
                  <yd-cell-item>
                        <div class="block text-center" slot="right">
                            <button type="button" class="btn btn-text-3 underline" @click="onAddTaskOne2">+继续添加</button>
                        </div>
                    </yd-cell-item>
                </yd-cell-group>
                    <!--  架子材质 -->
              <!--   组合效果 -->

            </form>
        </div>

       <!--end-->
         <!--架子材质弹框-->
        <yd-popup v-model="selectModalShow2" position="bottom" height="100%" class="yq-popup">
            <div slot="top">
                <yd-navbar title="架子材质">
                    <a href="javascript:void(0);" slot="left" @click="selectModalShow2 = false">
                        取消
                    </a>
                    <yd-button class="btn-define-1" slot="right" @click.native="addJiazicaizhi">确定</yd-button>
                </yd-navbar>
            </div>
            <div class="yq-popup-content">
                    <yd-cell-group>
                        <yd-cell-item>
                            <span slot="left">文字</span>
                            <yd-input slot="right" v-model="jiazicaizhi_item.name" required placeholder="必填"></yd-input>
                        </yd-cell-item>
                        <yd-cell-item>
                            <span slot="left">地址</span>
                            <yd-input slot="right" v-model="jiazicaizhi_item.guige" required placeholder="必填"></yd-input>
                        </yd-cell-item>
                        
                         <yd-cell-item type="a" href="javascript:void(0);" @click.native="onClickFile2">
                        <span slot="left">图片</span>
                        <img slot="right" src="assets/image/ico_camera.png" style="width:0.49rem;height:0.41rem;" />
                    </yd-cell-item>
                    <yd-cell-item v-if="jiazicaizhi_item.src.length>0">
                        <div class="upload-list clearfix" slot="left" style="padding:0.16rem 0;">
                            <div v-for="(item,index) in jiazicaizhi_item.src" class="item file-exist">
                                <div class="file"><img :src="item.src" /></div>
                                <yd-button type="danger" size="small" class="delete" @click.native="onDeleteFile2(index)">删除</yd-button>
                            </div>
                        </div>
                    </yd-cell-item>
                    <input type="file" id="fileImagea2" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" capture="camera" @change="onChaneFile2" hidden="hidden">
                   </yd-cell-group>
            </div>
			
			
			
			
        </yd-popup>
			<li class="lis">
	<!--选择地区-->
	<section class="express-area">
		<a id="expressArea" href="javascript:void(0)">
			<dl>
				<dt>请选择分类</dt>
				<dd>例如:孕期百科</dd>
				
			</dl>
		
			
		</a>
		
	
	</section>
	
	<div id="shoplist"></div>	
	<!--选择地区弹层-->
	<section id="areaLayer" class="express-area-box">
		<article id="areaBox">
			<div class="top">
				<h3>选择分类</h3>
			</div>
			<ul id="areaList" class="area-list" style="margin-bottom: 500px;"></ul>
		</article>
	</section>
	<!--遮罩层-->
	<div id="areaMask" class="mask"></div>
</li>
        <!--end-->
    </yd-layout>
	<script>
 var ddd=$("#expressArea dd").text();
</script>

    <script>
        var appVue = new Vue({
            el: '#app',
            data: function () {
                return {
                    appShow: true,
                    selectIndex:null,
                    selectIndex2:null,
                    selectModalShow: false,
                    selectModalShow2: false,
                    fileImagecanshu:null,
                    imgList:[
                        {
                            src:[],
                            id:'fileImage0',
                            cz:1,
                            jz:1,
                        }
                    ],
                    jiazicaizhi_item:{
                            src:[],
                            name:"",
                            guige:"",
                            status:0,
                            isJihuo:0, 
                            price:"",
                    },
                    jiazicaizhilist:
                        [
                            {
                                id:1,
                                src:"",
                                name:"",
                                guige:"",
                             },
                       ],
                    foxcaizhilist:
                    [
                        {
                            id:1,    
                            src:[],
                            name:"",
                            changdu:"",
                            price:"",
                            guige:"",
                            status:0,
                            isJihuo:0,
                            size:"",
                         }
                   ]
                }
            },
             mounted: function () {
             
            },
            methods: {

                deleteCaizhi2:function(index){
                   
                    if(this.jiazicaizhilist.length>1){
                        var id = this.jiazicaizhilist[index].id;
                    this.jiazicaizhilist.splice(index,1); 
                    this.removeAmmount(2,id);
                    }
                },
                onClickFile: function () { //点击上传图片事件
                    document.getElementById("fileImagea").click();
                },
                onClickFile2: function () { //点击上传图片事件
                    document.getElementById("fileImagea2").click();
                },
                 onClickFile3: function (index) { //点击上传图片事件
                    var ida="fileImage"+(index);
                    console.log(ida);
                    document.getElementById(ida).click();
                },
                 onChaneFile3: function (index) { //
                    var vm = this;
                     var ida="fileImage"+(index);
                    var file = document.getElementById(ida).files[0];
                    if (file) {
                        if (!/image\/\w+/.test(file.type)) {
                            alert("必须上传图片！");
                            return false;
                        }
                        var reader = new FileReader();
                        reader.readAsDataURL(file);
                        reader.onloadstart = function () {
                            console.log('开始读取')
                        }
                        reader.onprogress = function () {
                            console.log('正在读取.....')
                        }
                        reader.onload = function (e) {
                        
                        
                        $.ajax({
                       url: './glphotoapi.php',
                       type: 'POST',
                        dataType: 'json',
                        data: {img:e.target.result},
                           })
                         .done(function(respon) {
                         if (respon.error==0) {
                        var photo=respon.img;
                        vm.imgList[index].src.push({
                        src: photo
                        });
                        console.log(vm.imgList[index].src);     
                        }else{
                            }
                          })
                            
                        }
                        reader.onabort = function () {
                            console.log('读取中断！！')
                        }
                        reader.onerror = function () {
                            console.log('读取出现错误！！')
                        }
                        reader.onloadend = function () {
                            console.log('FileReader读取步骤执行完毕')
                        }
                    }
                },
                onChaneFile: function () { //
                    var vm = this;
                    var file = document.getElementById('fileImagea').files[0];
                    if (file) {
                        if (!/image\/\w+/.test(file.type)) {
                            alert("必须上传图片！");
                            return false;
                        }
                        var reader = new FileReader();
                        reader.readAsDataURL(file);
                        reader.onloadstart = function () {
                            console.log('开始读取')
                        }
                        reader.onprogress = function () {
                            console.log('正在读取.....')
                        }
                        reader.onload = function (e) {
                    
                        $.ajax({
                        url: './glphotoapi.php',
                        type: 'POST',
                        dataType: 'json',
                        data: {img:e.target.result},
                        })
                        .done(function(respon) {
                        if (respon.error==0) {
                        var photo=respon.img;
                        vm.foxcaizhilist[vm.selectIndex].src.push({
                        src: photo
                        });
                        console.log(vm.foxcaizhilist[vm.selectIndex].src);     
                       }else{
                          }
                          })        
    
                        }
                        reader.onabort = function () {
                            console.log('读取中断！！')
                        }
                        reader.onerror = function () {
                            console.log('读取出现错误！！')
                        }
                        reader.onloadend = function () {
                            console.log('FileReader读取步骤执行完毕')
                        }
                    }
                },
                  onChaneFile2: function () { //
                    var vm = this;
                    var file = document.getElementById('fileImagea2').files[0];
                    if (file) {
                        if (!/image\/\w+/.test(file.type)) {
                            alert("必须上传图片！");
                            return false;
                        }
                        var reader = new FileReader();
                        reader.readAsDataURL(file);
                        reader.onloadstart = function () {
                            console.log('开始读取')
                        }
                        reader.onprogress = function () {
                            console.log('正在读取.....')
                        }
                        reader.onload = function (e) {
                        
                        
                                $.ajax({
        url: './glphotoapi.php',
        type: 'POST',
        dataType: 'json',
        data: {img:e.target.result},
      })
      .done(function(respon) {
        if (respon.error==0) {
var photo=respon.img;
                                 vm.jiazicaizhilist[vm.selectIndex2].src.push({
                                src: photo
                            });
                            console.log(vm.imgList[vm.selectIndex2].src);     
        }else{

        }
      })    
                        
                        
        
                            
                        }
                        reader.onabort = function () {
                            console.log('读取中断！！')
                        }
                        reader.onerror = function () {
                            console.log('读取出现错误！！')
                        }
                        reader.onloadend = function () {
                            console.log('FileReader读取步骤执行完毕')
                        }
                    }
                },
               
                onDeleteFile: function (item,index) {
                     this.foxcaizhi_item.src=[];
                },
                 onDeleteFile2: function (index) {
                     this.jiazicaizhi_item.src=[];
                },
                 onDeleteFile3: function (index,indexa) {
                    this.imgList[index].src=[];
                },
                handleSumbit: function () { //确实提交
                    console.log(this.jiazicaizhilist);
                        console.log(2);
                                  $.ajax({
                                        url: 'gonglueapi.php',
                                        type: 'POST',
                                        dataType: 'json',
                                        data: {sname: this.jiazicaizhilist},
                                      })
                                      .done(function(respon) {
                                        if (respon.error==0) {
                                             layer.open({
                                    content: '删除成功'
                                    ,skin: 'msg'
                                    ,time: 2 //2秒后自动关闭
                                  });
                                      
                                        }else{
                                            
                                        
                                        }
                                      })
             
                return false;
                    this.$dialog.toast({
                        mes: '提交成功！',
                        timeout: 1500,
                        icon: 'success'
                    });
                    window.location.href="index.html";
                },
                onShowSelectBox: function (index) { //  显示千佛墙材质
                this.selectIndex=index;
                this.selectModalShow = true;
                this.foxcaizhi_item=this.foxcaizhilist[index];
                },
                 onShowSelectBox2: function (index) { //  显示架子材质
                this.selectIndex2=index;
                this.selectModalShow2 = true;
                this.jiazicaizhi_item=this.jiazicaizhilist[index];
                },
                addFoxiangcaizhi:function(){
               this.foxcaizhilist[this.selectIndex]=this.foxcaizhi_item;
                    this.selectModalShow = false;
                },
                addJiazicaizhi:function(){
                    this.jiazicaizhilist[this.selectIndex2]=this.jiazicaizhi_item;
                    this.selectModalShow2 = false;
                },
                onAddTaskOne: function () { //新增一条千佛墙材质
                     var i=this.foxcaizhilist[this.foxcaizhilist.length-1].id;
                     i++;
                    this.foxcaizhilist.push({
                            id:i,
                            src:[],
                            name:"",
                            changdu:"",
                            price:"",
                            guige:"",
                            status:0,
                            isJihuo:0,
                            size:"",
                        });
                     this.calculateAmmount(1);
                     this.onShowSelectBox(this.foxcaizhilist.length-1);
                },
                onAddTaskOne2: function () { //新增一条架子材质

                    var i=this.jiazicaizhilist[this.jiazicaizhilist.length-1].id;
                     i++;
                    this.jiazicaizhilist.push({
                            id:i,
                            src:[],
                            name:"",
                            guige:"",
                            status:0,
                            isJihuo:0, 
                            price:"",
                        });
                     this.calculateAmmount(2);
                     this.onShowSelectBox2(this.jiazicaizhilist.length-1);
                },
                 calculateAmmount:function(flag){
                        var vm = this;
                        if(flag ==1){
                                //添加千佛墙材质
                                //
                            var length = vm.foxcaizhilist.length;
                            var czId = vm.foxcaizhilist[length-1].id;

                            vm.jiazicaizhilist.forEach(function(item){
                                vm.imgList.push({
                                    src:"",
                                    id:'fileImage'+(vm.imgList.length),
                                    cz:czId,
                                    jz:item.id,
                                });
                    })

                    }else{
                        //添加架子材质
                        var length = vm.jiazicaizhilist.length;
                        var jzId = vm.jiazicaizhilist[length-1].name;

                        vm.foxcaizhilist.forEach(function(item){
                
                            vm.imgList.push({
                                src:"",
                                id:'fileImage'+(vm.imgList.length),
                                cz:item.name,
                                jz:jzId,
                            });
                        })
                    }
                    console.log( vm.imgList);
                 },
                 removeAmmount:function(flag,id){
                    var vm = this;
                    if(flag ==1)
                    {
                        for(var i=0;i<vm.imgList.length;i++){

                            if(vm.imgList[i].cz == id){
                               vm.imgList.splice(i,1);
                            }
                        }
                       
                    }else{

                    for(var i=0;i<vm.imgList.length;i++){

                            if(vm.imgList[i].jz == id){
                               vm.imgList.splice(i,1);
                            }
                        }

                    }

                 }
            }
        });
    </script>
    <script>  
        if (navigator.geolocation){  

            navigator.geolocation.getCurrentPosition(  

                function( position ) {    

                    show_msg( position );  

                 },  

                function( err ) {  

                    switch(error.code){  
                    case 0:  
                      alert("尝试获取您的位置信息时发生错误：" + error.message);  
                      break;  
                    case 1:  
                        alert("用户拒绝了获取位置信息请求。");  
                      break;  
                    case 2:  
                        alert("浏览器无法获取您的位置信息：" + error.message);  
                      break;  
                    case 3:  
                        alert("获取您位置信息超时。");  
                      break;  
                    }  
                }  
       )}else  
          alert( '您当前使用的浏览器不支持Geolocation服务' );  


        function show_msg( position ){  

            var lat = position.coords.latitude;

            var lng = position.coords.longitude; 

            alert( "您所在的位置： 经度" + lat + "，纬度" + lng );  
            if( typeof position.address != "undefined" ){  

                var country = position.address.country; 

                var province = position.address.region;

                var city = position.address.city;  

               // alert(' 您位于 ' + country + province + '省' + city +'市');  
            }  
			
			  var latlon = position.coords.latitude+','+position.coords.longitude; 
 
  //baidu
  var url = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location="+latlon+"&output=json&pois=0"; 
  $.ajax({ 
    type: "GET", 
    dataType: "jsonp", 
    url: url, 
      beforeSend: function(){ 
       
		console.log('正在定位...');
      }, 
      success: function (json) { 
        if(json.status==0){ 
         // $("#baidu_geo").html(json.result.formatted_address); 
		  alert(json.result.addressComponent.city);
        } 
      }, 
      error: function (XMLHttpRequest, textStatus, errorThrown) { 
        $("#baidu_geo").html(latlon+"地址位置获取失败"); 
    } 
  });
				
        }  
    </script> 

	<script>
	
	
	var pageii = layer.open({
   type: 1
  ,content:'<header class="H-header H-theme-background-color9" id="header">'
        +'<div class="aui-search-box1">'
        +'<i class="icon icon-search"></i>'
        +'<input type="text" id="sname" placeholder="搜索你要推荐的商品">'
    +'</div>'
    +'</header>'	
          +'<div>'
+'<input type="checkbox" value="1" name="sProblem">check1</br>'
+'<input type="checkbox" value="2" name="sProblem">check2</br>'
+'<input type="checkbox" value="3" name="sProblem">check3</br>'
+'<input type="checkbox" value="4" name="sProblem">check4</br>'  
	+'</div>'
	+'<footer class="H-footer H-flexbox-horizontal H-theme-background-color-white H-margin-vertical-top-10 H-footer-half" id="footer">'
  +'<button class="quereng" onclick="getTheCheckBoxValue()" style="width: 100%; position: fixed; bottom: 0px;'
  +'font-weight:800">确认推荐</button>'
    +'</footer>'
  ,anim: 'up'
  ,style: 'position:fixed; left:0; top:0; width:100%; height:100%; border: none; -webkit-animation-duration: .5s; animation-duration: .5s;'
});
	
	function getTheCheckBoxValue(){
		
       var checkboxValue= new Array();  
       var checkboxText= new Array();  
       var checkboxStr=document.getElementsByName("sProblem");    
       for(var i=0; i<checkboxStr.length; i++){  
        if(checkboxStr[i].checked){  
                //alert(checkboxStr[i].value+","+checkboxStr[i].nextSibling.nodeValue);  
            checkboxValue.push(checkboxStr[i].value);  
                    checkboxText.push(checkboxStr[i].nextSibling.nodeValue);  
         }  
        }   
        //输出值和文本  
         alert(checkboxValue); 
		 checkboxValue=checkboxValue.toString();  
 $("#shoplist").html(checkboxValue); 		 
layer.closeAll();
	}

	</script>

	    <script src="assets/js/jquery.area.js"></script>

</body>
</html>